<nz-layout>
  <nz-sider class="home-sider" nzCollapsible [(nzCollapsed)]="isCollapsed" [nzWidth]="defaultSiderWidth"
            [nzReverseArrow]="false"
            (nzCollapsedChange)="collapsedChange()" [ngStyle]="sliderStyleGroup">
    <div class="logo">
    </div>
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed">
      <li nz-menu-item routerLink="/home/main" routerLinkActive="ant-menu-item-selected">
        <span>
          <i nz-icon type="home" theme="outline"></i>
          <span class="nav-text">主页</span>
        </span>
      </li>
      <li nz-submenu>
        <span title><i class="anticon anticon-global"></i><span class="nav-text">百度地图</span></span>
        <ul>
          <li nz-menu-item routerLink="/home/baidu-map/pc" routerLinkActive="ant-menu-item-selected">
            <i nz-icon type="desktop" theme="outline"></i>PC端
          </li>
          <li nz-menu-item routerLink="/home/baidu-map/mobile" routerLinkActive="ant-menu-item-selected">
            <i nz-icon type="mobile" theme="outline"></i>移动端
          </li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="tool" theme="outline"></i><span class="nav-text">工具</span></span>
        <ul>
          <li nz-menu-item routerLink="/home/tool/ico-generator" routerLinkActive="ant-menu-item-selected">
            <i nz-icon type="picture" theme="outline"></i>ico生成器
          </li>
          <li nz-menu-item routerLinkActive="ant-menu-item-selected">
            <i nz-icon type="qrcode" theme="outline"></i>二维码制作
          </li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="code" theme="outline"></i><span class="nav-text">在线编程</span></span>
        <ul>
          <li nz-menu-item><i nz-icon type="html5" theme="outline"></i>html/js</li>
          <li nz-menu-item><i nz-icon type="laptop" theme="outline"></i>C/C++</li>
          <li nz-menu-item><i nz-icon type="coffee" theme="outline"></i>Java</li>
        </ul>
      </li>
      <li nz-submenu>
        <span title><i nz-icon type="experiment" theme="outline"></i><span class="nav-text">黑科技</span></span>
        <ul>
          <li nz-menu-item routerLink="/home/tech/online-ps" routerLinkActive="ant-menu-item-selected">
            <i nz-icon type="picture" theme="outline"></i>网页版PS
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout class="content-container" [ngStyle]="contentContainerStyleGroup">
    <nz-header style="background: #fff; padding:0;">
      <button class="sider-trigger-btn" nz-button nzType="default" (click)="sliderTrigger()">
        <i nz-icon type="menu-fold" theme="outline" [style.display]="triggerBtnDisplay['fold']"></i>
        <i nz-icon type="menu-unfold" theme="outline" [style.display]="triggerBtnDisplay['unfold']"></i>
      </button>
      <nz-dropdown class="header-menu" [nzPlacement]="'bottomRight'" [nzTrigger]="'click'">
        <a nz-dropdown>
          {{userBean.username}}<i nz-icon type="down" theme="outline"></i>
        </a>
        <ul nz-menu>
          <li nz-menu-item (click)="logout()">退出登录</li>
        </ul>
      </nz-dropdown>
    </nz-header>
    <div style="height:auto;" [style.minHeight]="contentMinHeight">
      <router-outlet></router-outlet>
    </div>
  </nz-layout>
</nz-layout>
